<template>
  <div class='container'>
    <el-dialog
    @close="cancelBtn"
    title="预览文章"
    :visible="showPreview"
    width="55%">
  <el-row>
    <h2>{{previewList.title}}</h2>
  </el-row>
  <el-row class="textBox">
    <span class="dialogtext">{{previewList.createTime | parseTime}}</span>
    <span class="dialogtext">{{previewList.username}}</span>
    <span class="dialogtext ivu-icon  el-icon-view"></span>
    <span class="dialogtext">{{previewList.visits}}</span>
  </el-row>
  <el-row class="content" v-html="previewList.articleBody"></el-row>
</el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    showPreview: {
      type: Boolean
    },
    previewList: {
      type: Object
    }
  },
  methods: {
    cancelBtn () {
      this.$emit('update:showPreview', false)
    }
  }
}
</script>

<style scoped lang='scss'>
 .dialogtext {
    margin-right: 1rem;
  }
  .textBox {
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
  }
 .content {
    background: #f5f5f5;
    padding: 1.25rem;
  }
</style>
